<script setup lang="ts">
import { Search, Delete } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'
interface IProp {
  width: string
  height?: string
  mask?: boolean
}

const props = withDefaults(defineProps<IProp>(), {
  height: 'auto',
  mask: true
})

interface IEmits {
  (e: 'onRemove'): void
}
const emits = defineEmits<IEmits>()
const isOpen = ref(false)

// 预览
const isPreview = ref(false)

// 点击删除
const deleteImage = () => {
  emits('onRemove')
}

const iconSize = computed(() => {
  const width = props.width || '0'
  const size = parseInt(width.match(/\d+/)![0], 10)
  return size / 5
})
</script>

<template>
  <div
    class="i-image"
    :style="{ width: width, height: height }"
    @mouseenter="isOpen = true"
    @mouseleave="isOpen = false"
  >
    <el-image v-bind="$attrs"></el-image>
    <transition name="fade">
      <div v-if="mask" class="mask" v-show="isOpen">
        <el-icon :size="iconSize" class="cursor-pointer" @click="isPreview = true"
          ><Search
        /></el-icon>
        <el-icon :size="iconSize" class="cursor-pointer" @click="deleteImage"><Delete /></el-icon>
      </div>
    </transition>
    <el-image-viewer
      v-if="isPreview"
      :url-list="[($attrs as any).src]"
      @close="isPreview = false"
      teleported
    ></el-image-viewer>
  </div>
</template>

<style lang="scss" scoped>
.i-image {
  position: relative;
  flex-shrink: 0;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
  }
}
</style>
